<template>
  <div class="banner">
      <img class="banner__img" src="https://www.dell-lee.com/imgs/vue3/banner.jpg" />
  </div>
</template>

<script>
export default {
  name: 'HomeBanner'
}
</script>

<style lang="scss" scoped>
.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%; /*高度相对于宽度会自动撑开为25.4%*/
  background: #eee;  /*用于图片没有加载出来时的背景显示*/
  &__img {
    width: 100%;
  }
}
</style>
